//忘记密码

import './index.scss';
import { Card, Form, Input, Button, message ,Select,Space} from 'antd';
import { DownOutlined ,RollbackOutlined} from '@ant-design/icons';
import React, { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { forgetPasswordAPI } from '@/api/user';
import { useReTip } from '@/hooks/useReTip';

const { Option } = Select

const userList = [
  {
    key: '/admin',
    label: '管理员',
  },
  {
    key: '/coach',
    label: '教练员',
  },
  {
    key: '/student',
    label: '学员',
  },
];

const ForgetPassword = () => {
  const {handleRemind}=useReTip()
  const dispatch = useDispatch()
 const navigate =useNavigate()
const [type,setType] = useState('/admin')
const onUserChange=(key)=>{
  console.log('用户选择了',key)
  
  setType(key)
}
  const onFinish = async(values) =>{
    // console.log("用户数据：",values)
    // console.log("修改"+userKey)
    const trimmedKey = values.type.replace(/^\//, '');
    let identityNumber;
  switch(trimmedKey) {
    case 'admin':
      identityNumber = 0;
      break;
    case 'coach':
      identityNumber = 1;
      break;
    case 'student':
      identityNumber = 2;
      break;
    default:
      identityNumber = -1;
  }
    const formDataWithDropdown = {
      ...values, 
      identity: identityNumber
    }
   const res= await forgetPasswordAPI(formDataWithDropdown)
    message.success('修改成功！')
    navigate('/')
  }
    return (
     <div className="login">
            {/* 返回按钮 */}
             <Space>
            <Button type="default" size="middle" onClick={() => {navigate('/') }}>
            <RollbackOutlined />
            </Button>
            </Space>
        <Card className="login-container">
           <div>忘记密码</div>
           {/* 登录表单 */}
            <Form onFinish={onFinish} validateTrigger="onBlur">
          <Form.Item  
          name='phone'
          //多条校验，先校验第一条规则，第一条通过后，再校验第二条
          rules={[
            { 
                required: true, 
                message: '请输入手机号' 
            },
            {
                pattern:/^1[3-9]\d{9}$/,
                message:'请输入正确的手机号格式'
            }
            ]}>
            <Input size="large" placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item 
          name='password'
          rules={[
            { 
                required: true, 
                message: '请输入密码' 
            }
            ]}>
            <Input size="large" placeholder="请输入密码" />
          </Form.Item>
            <Form.Item label="用户类型" name="type"
            rules={[
              {
                required:true,
                message:'请选择用户类型'
              }
            ]}
            >
            <Select
              placeholder="请选择用户"
              defaultValue="请选择"
              style={{ width: 120 }}
              onChange={onUserChange}
            >
              {userList.map(item =><Option key={item.key} value={item.key}>{item.label}</Option>)}
              
            </Select>
          </Form.Item>

              <Form.Item>
                <Button type="primary" htmlType="submit" size="large"block>
                 提交
                </Button>
              </Form.Item>
             
            </Form>
          </Card>
        </div>
      )
    }
    
    export default ForgetPassword